<template>
  <!-- 房源信息档案库详情 -->
  <div class="housingArchiveDetailsPage">
    <CommonTitle titleName="基本信息">
      <template #rightCnBox>
        <div class="titleRight">
          <el-button plain class="button_edit" @click="goEdit"
            >编辑</el-button
          >
        </div>
      </template>
    </CommonTitle>
    <div class="inpuBox">
      <el-form
        :inline="true"
        :model="baseForm"
        class="demo-form-inline"
        label-position="right"
        label-width="110px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              style="width: 92.5%; margin-right: 5px"
              label="资产名称"
            >
              <span class="itemContentBox">{{ baseForm.assetsName }}</span>
            </el-form-item>
            <el-button plain class="f-r button_edit" @click="goAssetsDetail"
              >查看信息</el-button
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item style="width: 100%" label="门牌号码">
              <span class="itemContentBox">{{ baseForm.housingNumber }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="房源当前状态">
              <span class="itemContentBox">{{
                baseForm.status == 1
                  ? "在用"
                  : baseForm.status == 0
                  ? "闲置"
                  : "停用"
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="所属业态">
              <span class="itemContentBox">{{
                baseForm.businessType == 1
                  ? "养老"
                  : baseForm.businessType == 2
                  ? "教育"
                  : baseForm.businessType == 3
                  ? "医疗"
                  : baseForm.businessType == 4
                  ? "农贸"
                  : baseForm.businessType == 5
                  ? "综合体"
                  : "文&体"
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="房源用途">
              <span class="itemContentBox">{{
                baseForm.useType == 1
                  ? "出租"
                  : baseForm.useType == 2
                  ? "自用"
                  : baseForm.useType == 3
                  ? "出街"
                  : baseForm.useType == 4
                  ? "移交"
                  : "委托运营"
              }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="房源持有面积">
              <span class="itemContentBox">{{ baseForm.area }} ㎡</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="责任部门">
              <span class="itemContentBox">{{ baseForm.departmentName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="租金定价">
              <span class="itemContentBox">{{ baseForm.rentPricing }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <CommonTitle titleName="相关文件" />
    <div class="inpuBox">
      <el-form
        :inline="true"
        :model="baseForm"
        class="demo-form-inline"
        label-position="right"
        label-width="100px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              class="noBgBox"
              style="width: 100%"
              label="资产实景图"
            >
              <template v-if="state.imgArr.length">
                <el-image
                  v-for="(n, i) in state.imgArr"
                  :key="i"
                  style="width: 100px; height: 100px; margin-right: 20px"
                  :src="n.fileAddress"
                  :zoom-rate="1.2"
                  :preview-src-list="state.picSrcListArr"
                  :initial-index="4"
                  fit="cover"
                  @click="switchImg(n.fileAddress)"
                />
              </template>
              <template v-else>
                无
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider border-style="dashed" />
        <el-row>
          <el-col :span="24">
            <el-form-item
              class="noBgBox docBox"
              style="width: 100%"
              label="其他文件"
            >
              <div v-if="state.fileArr.length" style="width: 100%">
                <el-row :gutter="10" style="width: 100%">
                  <el-col :span="5" v-for="(n, i) in state.fileArr" :key="i">
                    <div class="docNameBox">{{ i + 1 }}.{{ n.fileName }}</div>
                    <div
                      class="downLoadBtn"
                      @click="downloadFile(n.fileAddress, n.fileName)"
                    >
                      <img
                        style="vertical-align: middle; margin-bottom: 3px"
                        src="@/assets/iconImg/download.png"
                        alt=""
                      />
                      下载
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div v-else class="m-t5">无</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <CommonTitle titleName="建档信息"></CommonTitle>
    <div class="inpuBox">
      <el-form
        :inline="true"
        :model="baseForm"
        class="demo-form-inline"
        label-position="right"
        label-width="100px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item style="width: 100%" label="建档时间">
              <span class="itemContentBox">{{ baseForm.createTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import { ref, reactive, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import {
  ElForm,
  ElFormItem,
  ElRow,
  ElCol,
  ElImage,
  ElDivider,
} from "element-plus";
import { assetsApi, housingApi } from "@/api/assets";

const route = useRoute();
const store = useStore();
const router = useRouter();
// 从路由path中获取id
const getHousingId = router.currentRoute.value.params.housingId;

const baseForm = reactive({
  assetsId: "",
  assetsName: "",
  address: "",
  status: "",
  businessType: "",
  useType: "",
  area: "",
  housingNumber: "",
  departmentName: "",
  rentPricing: "",
  createTime: "",
  files: [],
});

const state = reactive({
  imgArr: [],
  fileArr: [],
  picSrcListArr: [],
});

const initInfo = () => {
  housingApi.getHousingDetail(getHousingId).then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      Object.keys(baseForm).forEach((key) => {
        baseForm[key] = data[key] ? data[key] : "--";
      });
      baseForm.files.map((n, i) => {
        if (n.fileType == 1) {
          state.imgArr.push(n);
        } else {
          state.fileArr.push(n);
        }
      });
      state.imgArr.map((n, i) => {
        state.picSrcListArr.push(n.fileAddress);
      });
    }
  });
};
const switchImg = (url) => {
  // 当前点击的图片放在第一个
  state.picSrcListArr = state.picSrcListArr.filter((item) => item != url);
  state.picSrcListArr.unshift(url);
};

// 查看资产详情
const goAssetsDetail = () => {
  router.push({
    path: "/asset/company/assetDetail/" + baseForm.assetsId,
  });
};

const goEdit = () => {
  router.push({
    path: "/asset/company/housingInformationEdit/" + getHousingId,
    query: { pageType: "edit" },
  });
};

onMounted(() => {
  initInfo();
});
</script>

<style lang="scss" scoped>
.housingArchiveDetailsPage {
  .inpuBox {
    padding: 32px 76px 15px;
    border-radius: 10px;
    border: 1px solid #e3e7f1;
    margin-bottom: 38px;
    .demo-form-inline {
      .docBox {
        .downLoadBtn {
          width: 77px;
          height: 32px;
          line-height: 30px;
          display: inline-block;
          background: linear-gradient(180deg, #ffd091 0%, #ffa557 100%);
          border-radius: 4px;
          text-align: center;
          font-weight: 500;
          color: #ffffff;
          font-family: SourceHanSansMedium;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.housingArchiveDetailsPage {
  .titleRight {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  .inpuBox {
    :deep(.demo-form-inline) {
      .el-form-item {
        margin-bottom: 34px;
        .el-form-item__label {
          font-weight: 500;
          font-size: 16px;
          font-family: SourceHanSansMedium;
        }
        .el-form-item__content {
          padding-left: 20px;
          border-radius: 3px;
          background: #f7f7fa;
        }
      }
      .noBgBox {
        .el-form-item__content {
          background: none;
        }
      }
      .docBox {
        .el-form-item__content {
          margin-top: 50px;
        }
      }
    }
  }
}
</style>
